<template>
    <div>
        <!--  修改密码 -->
        <div class="mainer">
            <div class="input-group">
                <div>原密码:</div>
                <el-input @blur="checkPwd" type="password" placeholder="原密码" v-model="user.upwd"></el-input>
                <span :class="{danger:!status.upwd,succ:status.upwd}">{{msg.upwd}}</span>
            </div>
            <div class="input-group">
                <div>新密码:</div>
                <el-input @blur="checknewpwd" type="password" placeholder="新密码" v-model="user.newpwd"></el-input>
                <span :class="{danger:!status.newpwd,succ:status.newpwd}">{{msg.newpwd}}</span>
            </div>
            <div class="input-group">
                <div>确认密码:</div>
                <el-input @blur="checkRepwd" type="password" placeholder="再次确认密码" v-model="user.reNewpwd"></el-input>
                <span :class="{danger:!status.reNewpwd,succ:status.reNewpwd}">{{msg.reNewpwd}}</span>
            </div>
            <div class="alert_btn" @click="alertpwd">修改</div>
        </div>
    </div>
</template>

<script>
    export default {
        data() {
            return {
                user:{
                    upwd:'',
                    newpwd:'',
                    reNewpwd:''
                },
                msg:{
                    upwd:'',
                    newpwd:'',
                    reNewpwd:''
                },
                status:{
                    upwd:false,
                    newpwd:false,
                    reNewpwd:false
                }
            }
        },
        methods:{
            alertpwd(){
                const {checkPwd,checknewpwd,checkRepwd} = this
                checkPwd()
                checknewpwd()
                checkRepwd()
                const {upwd,newpwd,reNewpwd} = this.status
                if (upwd&&newpwd&&reNewpwd){
                    // 表单验证通过 执行修改密码
                    const uname=sessionStorage.getItem('uname')
                    const url='admin/alert_password'
                    const params=`uname=${uname}&upwd=${this.user.upwd}&newpwd=${this.user.newpwd}`
                    this.axios.put(url,params)
                        .then(res => {
                            if (res.data.code==200){
                                alert('密码修改成功')
                            }else {
                                alert('原密码错误')
                            }
                        })
                }
            },
            checkPwd(){
                if (!this.user.upwd){
                    this.msg.upwd='密码不能为空'
                    this.status.upwd=false
                }else {
                    this.msg.upwd=''
                    this.status.upwd=true
                }
            },
            checknewpwd(){
                if (!this.user.newpwd){
                    this.msg.newpwd='新密码不能为空'
                    this.status.newpwd=false
                }else{
                    this.msg.newpwd='密码格式正确'
                    this.status.newpwd=true
                }
            },
            checkRepwd(){
                if (!this.user.reNewpwd){
                    this.msg.reNewpwd='确认密码不能为空'
                    this.status.reNewpwd=false
                    return
                }
                // 两次密码校验
                if (this.user.newpwd==this.user.reNewpwd){
                    this.msg.reNewpwd='两次密码正确'
                    this.status.reNewpwd=true
                }else{
                    this.msg.reNewpwd='两次密码不一致'
                    this.status.reNewpwd=false
                }
            }
        }
    }
</script>

<style lang="scss" scoped>
.mainer {
    width: 500px;
    padding: 20px 40px;
    ::v-deep .el-input__inner{
        width: 100%;
        &:focus {
            border-color: #dcdfe6;
        }
    }
    .input-group {
        display: flex;
        align-items: center;
        padding-bottom: 20px;
        position: relative;
        >div {
            width: 5em;
        }
        .el-input {
            flex: 1;
        }
        span {
            position: absolute;
            right: 20px;
            top: calc(50% - 20px);
            font-size: .9em;
            &.danger {
                color: #f00;
            }
            &.succ {
                color: #131dff;
            }
        }
    }
    .alert_btn {
        width: 60px;
        text-align: center;
        background-color: #f00;
        border-radius: 5px;
        padding: 5px 0;
        color: #fff;
        cursor: pointer;
        &:active {
            background-color: darken(#f00,10%);
        }
    }
}
</style>